import { Radio, Table } from "antd"
import { useEffect, useState } from "react"
import { styled } from '@umijs/max'
import StationSelect, { StationSelected } from "@/components/StationSelect"

const Container = styled.div`
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 16px;
`

type Value = StationSelected[]

interface UseRangeProps {
  value?: Value
  onChange?: (value?: Value) => void
  style?: React.CSSProperties
}

const UseRange: React.FC<UseRangeProps> = props => {
  const [type, setType] = useState<'all' | 'partial'>('all')

  const del = (id: string) => {
    props.onChange?.(props.value?.filter(it => it.id !== id))
  }

  useEffect(() => {
    props.onChange?.([])
  }, [type]);

  return (
    <Container style={props.style}>
      <Radio.Group
        value={type}
        options={[
          {label: '全部自营场站', value: 'all'},
          {label: '指定场站', value: 'partial'},
        ]}
        onChange={({target}) => setType(target.value)}
      />
      {
        type === 'partial' && [
          <StationSelect
            key='chose'
            type="checkbox"
            value={props.value}
            onChange={props.onChange}
          />,
          <Table
            key='table'
            rowKey='id'
            columns={[
              {title: '场站名称', dataIndex: 'name'},
              {title: '操作', width: 100, dataIndex: 'id', render: (id) => {
                return <a onClick={() => del(id)}>删除</a>
              }},
            ]}
            dataSource={props.value}
            pagination={{
              pageSize: 10, total: props.value?.length || 0,
              size: 'small', simple: true, hideOnSinglePage: true,
            }}
          />
        ]
      }
    </Container>
  )
}

export default UseRange